import { getNewsList } from '@/servers/api/collection';
import { FormattedMessage, history, useIntl, useLocation } from '@umijs/max';
import { Button, Col, Form, Input, Row, Space, Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

export default function CandrNewsList() {
    let location = useLocation();
    const intl = useIntl();
    const [form] = Form.useForm();
    const [dataSource, setdataSource] = useState([]); //表格
    /** 数据总条数 */
    const [count,setCount] = useState(0)
    /** loading */
    const [loading,setLoading] = useState(true)
    /** 详情 */
    function details(row) {
        history.push('/detail', {
            id: row.id,
            type: 1,
            releaseType: 'news',
        });
    }
    const columns = [
        {
            title: <FormattedMessage id="新闻标题"></FormattedMessage>,
            key: 'title',
            render: (text, record) => (
                <>{record[intl.formatMessage({ id: 'item.title' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="发布时间"></FormattedMessage>,
            key: 'createtime',
            render: (text, record) => (
                <>
                    {dayjs(record.createtime * 1000).format(
                        'YYYY-MM-DD HH:mm:ss',
                    )}
                </>
            ),
        },
        {
            title: <FormattedMessage id="操作"></FormattedMessage>,
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button
                        type="primary"
                        ghost
                        size="small"
                        onClick={() => {
                            details(record);
                        }}
                    >
                        <FormattedMessage id="查看详情"></FormattedMessage>
                    </Button>
                </Space>
            ),
        },
    ];
    const [tableparams, settableparams] = useState({
        page: 1,
        size: 10,
        limit:10,
        type: 1,
        searchKey: '',
    });
    function goodsList(params: any) {
        /** 赋值Loading状态 */
        setLoading(true)
        const qParams = {
            ...params,
        };
        getNewsList({ ...qParams }).then((res) => {
            /** 赋值Loading状态 */
            setLoading(false)
            /** 赋值总条数 */
            setCount(res.count)
            settableparams(params);
            /** 赋值列表总条数 */
            setdataSource(res.data);
        });
    }
    /** 分页 */
    const handleTableChange = (pagination:any) => {
        settableparams(prevParams => ({
            ...prevParams,
            page: pagination.current,  /** 更改页数 */
        }));
    };
    useEffect(() => {
        (async () => {
            goodsList({ ...tableparams, type: location?.state?.type });
        })();
    }, [tableparams.page]); /** 监听tableparams改变调用接口获取分页数据 */
    return (
        <>
            <Form
                colon={false}
                form={form}
                onFinish={(params) =>
                    goodsList({
                        ...tableparams,
                        ...params,
                        page: 1,
                        size: 10,
                    })
                }
                autoComplete="off"
            >
                <Row gutter={15}>
                    <Col span={4}>
                        <Form.Item
                            label={
                                <FormattedMessage id="搜索"></FormattedMessage>
                            }
                            name="searchKey"
                        >
                            <Input
                                allowClear
                                placeholder={intl.formatMessage({
                                    id: '根据关键字进行搜索',
                                })}
                            ></Input>
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item>
                            <Space>
                                <Button htmlType="submit" type="primary">
                                    <FormattedMessage id="搜索"></FormattedMessage>
                                </Button>
                                <Button
                                    htmlType="reset"
                                    onClick={() => {
                                        goodsList({
                                            page: 1,
                                            size: 10,
                                        });
                                    }}
                                >
                                    <FormattedMessage id="重置"></FormattedMessage>
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Table
                loading={loading}
                dataSource={dataSource}
                rowKey="id"
                columns={columns}
                pagination={{
                    pageSize: 10,  // 每页条数
                    total: count,  // 总条数
                    showSizeChanger: false,
                    onChange: (page, pageSize) => handleTableChange({ current: page, pageSize }),
                }}
            />
        </>
    );
}
